<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="/favicon.ico">
  <title>运宝</title>
  <!-- <script src='https://g.alicdn.com/code/npm/@ali/dingtalk-h5-remote-debug/0.1.3/index.js'></script> -->
  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
  <style rel="preload">
    html,
    body {
      height: 100% !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      font-size: 16px !important;
      box-sizing: content-box !important;
    }

    /* .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
    } */


    .loader-wrapper {
      position: fixed;
      z-index: 1090;
      height: 100vh;
      width: 100vw;
      /* background-color: rgba(240, 240, 240, 0.5); */
      background: linear-gradient(to bottom, rgb(132, 158, 241), #f5f5f5);
    }

    .truck-wrapper {
      height: 200px;
      width: 200px;
      border: 4px solid rgb(122, 151, 248);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-75%) scale(1.5);
      /* animation: bg 0.5s linear infinite; */
      /* border-bottom:3px solid #404143; */
      border-radius: 100%;
      overflow: hidden;
      box-shadow: inset 0px 0px 10px 4px rgba(0, 0, 0, 0.2), inset 0px 0px 5px 0px rgb(122, 151, 248);
    }

    .truck-wrapper:after {
      content: '资源加载中...';
      font-size: 16px;
      position: absolute;
      bottom: 0px;
      text-align: center;
      width: 100%;
      border-top: 1px solid rgb(122, 151, 248);
      background: rgb(122, 151, 248);
      background: -moz-linear-gradient(to right, rgba(122, 151, 248, .6) 0%, rgba(122, 151, 248, 1) 100%);
      background: -webkit-linear-gradient(to right, rgba(122, 151, 248, .6) 0%, rgba(122, 151, 248, 1) 100%);
      background: linear-gradient(to right, rgba(122, 151, 248, .6) 0%, rgba(122, 151, 248, 1) 100%);
      /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1efcc8', endColorstr='rgb(122, 151, 248)', GradientType=1); */
      color: #fff;
      padding-top: 8px;
      padding-bottom: 18px;
      /* animation: bg 3s  0s linear infinite; */
    }

    .truck {
      height: 110px;
      width: 150px;
      position: absolute;

      bottom: 48px;
      left: calc(50% + 10px);
      transform: translateX(-50%);

    }


    .truck>.truck-container {
      background: rgb(175, 189, 195);
      background: -moz-linear-gradient(-45deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
      background: -webkit-linear-gradient(-45deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
      background: linear-gradient(135deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afbdc3', endColorstr='#8fa3ad', GradientType=1);
      height: 50px;
      width: 80px;
      position: absolute;
      top: 10px;
      left: 10px;
      animation: container 0.4s linear infinite;
    }

    .truck>.glases {
      background: rgb(40, 181, 245);
      background: -moz-linear-gradient(-45deg, rgba(40, 181, 245, 1) 0%, rgba(40, 181, 245, 1) 50%, rgba(2, 153, 227, 1) 52%, rgba(2, 153, 227, 1) 100%);
      background: -webkit-linear-gradient(-45deg, rgba(40, 181, 245, 1) 0%, rgba(40, 181, 245, 1) 50%, rgba(2, 153, 227, 1) 52%, rgba(2, 153, 227, 1) 100%);
      background: linear-gradient(135deg, rgba(40, 181, 245, 1) 0%, rgba(40, 181, 245, 1) 50%, rgba(2, 153, 227, 1) 52%, rgba(2, 153, 227, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28b5f5', endColorstr='#0299e3', GradientType=1);
      position: absolute;
      height: 25px;
      width: 25px;
      border: 4px solid #FBD734;
      border-bottom: none;
      top: 35px;
      left: 95px;
      border-top-right-radius: 6px;
      animation: updown-half 0.4s linear infinite;
    }

    .truck>.glases:after {
      content: '';
      display: block;
      background-color: #FBD734;
      height: 13px;
      width: 10px;
      position: absolute;
      right: -10px;
      bottom: 0px;
      border-radius: 10px / 15px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-top-left-radius: 0px;

    }

    .truck>.glases:before {
      content: '';
      display: block;
      background-color: #F9BF2C;
      height: 12px;
      width: 16px;
      position: absolute;
      left: 0px;
      bottom: 0px;
      border-top-right-radius: 4px;
    }

    .truck>.bonet {
      background-color: #F9BF2C;
      position: absolute;
      width: 124px;
      height: 15px;
      top: 64px;
      left: 10px;
      z-index: -1;
      animation: updown 0.4s linear infinite;
    }

    .truck>.bonet:after {
      content: '';
      display: block;
      background: rgb(255, 255, 255);
      background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
      background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
      background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(225, 225, 225, 1) 51%, rgba(246, 246, 246, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=1);
      height: 10px;
      width: 6px;
      position: absolute;
      right: 0px;
      bottom: 2px;
      border-top-left-radius: 4px;

    }

    .truck>.base {
      position: absolute;
      background-color: #445A64;
      width: 106px;
      height: 15px;
      border-top-right-radius: 10px;
      top: 70px;
      left: 14px;
      animation: updown 0.4s linear infinite;
    }

    .truck>.base:before {
      content: '';
      display: block;
      background-color: #E54A18;
      height: 12px;
      width: 5px;
      position: absolute;
      left: -4px;
      bottom: 0px;
      border-bottom-left-radius: 4px;
    }

    .truck>.base:after {
      content: '';
      display: block;
      background-color: RGB(84, 110, 122);
      height: 10px;
      width: 20px;
      position: absolute;
      right: -16px;
      bottom: 0px;
      border-bottom-right-radius: 4px;
      z-index: -1;
    }

    .truck>.base-aux {
      width: 82px;
      height: 8px;
      background-color: #F9BF2C;
      position: absolute;
      top: 65px;
      left: 14px;
      border-bottom-right-radius: 4px;
      animation: updown 0.4s linear infinite;
    }

    .truck>.wheel-back {
      left: 20px
    }

    .truck>.wheel-front {
      left: 95px;
    }

    .truck>.wheel-back,
    .truck>.wheel-front {

      border-radius: 100%;
      position: absolute;
      background: rgb(84, 110, 122);
      background: -moz-linear-gradient(-45deg, rgba(84, 110, 122, 1) 0%, rgba(84, 110, 122, 1) 49%, rgba(68, 90, 100, 1) 52%, rgba(68, 90, 100, 1) 100%);
      background: -webkit-linear-gradient(-45deg, rgba(84, 110, 122, 1) 0%, rgba(84, 110, 122, 1) 49%, rgba(68, 90, 100, 1) 52%, rgba(68, 90, 100, 1) 100%);
      background: linear-gradient(135deg, rgba(84, 110, 122, 1) 0%, rgba(84, 110, 122, 1) 49%, rgba(68, 90, 100, 1) 52%, rgba(68, 90, 100, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#546e7a', endColorstr='#445a64', GradientType=1);
      top: 80px;
      height: 22px;
      width: 22px;
      animation: spin 0.6s linear infinite;
    }

    .truck>.wheel-back:before,
    .truck>.wheel-front:before {
      content: '';
      border-radius: 100%;
      left: 5px;
      top: 5px;
      position: absolute;
      background: rgb(175, 189, 195);
      background: -moz-linear-gradient(-45deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
      background: -webkit-linear-gradient(-45deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
      background: linear-gradient(135deg, rgba(175, 189, 195, 1) 0%, rgba(175, 189, 195, 1) 50%, rgba(143, 163, 173, 1) 51%, rgba(143, 163, 173, 1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#afbdc3', endColorstr='#8fa3ad', GradientType=1);
      height: 12px;
      width: 12px;
    }

    @keyframes spin {
      50% {
        top: 81px;
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes container {

      30% {
        transform: rotate(1deg);
      }

      50% {
        top: 11px;
      }

      70% {
        top: 10px;
        transform: rotate(-1deg);
      }
    }

    .truck>.smoke {
      position: absolute;
      background-color: #AFBDC3;
      border-radius: 100%;
      width: 8px;
      height: 8px;
      top: 90px;
      left: 6px;
      animation: fade 0.4s linear infinite;
      opacity: 0;
    }

    .truck>.smoke:after {
      content: '';
      position: absolute;
      background-color: RGB(143, 163, 173);
      border-radius: 100%;
      width: 6px;
      height: 6px;
      top: -4px;
      left: 4px;
    }

    .truck>.smoke:before {
      content: '';
      position: absolute;
      background-color: RGB(143, 163, 173);
      border-radius: 100%;
      width: 4px;
      height: 4px;
      top: -2px;
      left: 0px;
    }

    @keyframes fade {

      30% {
        opacity: 0.3;
        left: 7px;
      }

      50% {
        opacity: 0.5;
        left: 6px;
      }

      70% {
        opacity: 0.1;
        left: 4px;
      }

      90% {
        opacity: 0.4;
        left: 2px;
      }
    }

    @keyframes bg {
      from {
        background-position-x: 0px;
      }

      to {
        background-position-x: -800px;
      }
    }

    @keyframes updown {
      50% {
        transform: translateY(-20%);
      }

      70% {
        transform: translateY(-10%);
      }
    }

    @keyframes updown-half {
      50% {
        transform: translateY(-10%);
      }

      70% {
        transform: translateY(-5%);
      }
    }
  </style>
</head>


<body>
  <div id="app">
    <div class="loader-wrapper">
      <div class="truck-wrapper">
        <div class="truck">
          <div class="truck-container"></div>
          <div class="glases"></div>
          <div class="bonet"></div>
          <div class="base"></div>
          <div class="base-aux"></div>
          <div class="wheel-back"></div>
          <div class="wheel-front"></div>
          <div class="smoke"></div>
        </div>
      </div>
    </div>
  </div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>